<template>
  <div>
        <van-row>
            <van-col span="24"><myheader/></van-col>
            <van-col span="6"><myleft/></van-col>
            <van-col span="18">
            <van-row>
              <van-col>
                <div>
                <!-- <van-uploader :after-read="upload"> -->
                <!-- <van-button>上传</van-button> -->
                <!-- </van-uploader> -->
                <!-- <van-button @click="download">导出</van-button>
                <van-button @click="showPopup"><add/></van-button><van-button>删除</van-button> -->
                
                </div>
              </van-col>

            </van-row>
            <van-row>
              
                <!-- <el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick" /> -->
                <div>
    <van-row style="padding-top: 1rem">
      <van-col span="8">职务名称:<input type="text" width="3rem"></van-col>
      <van-col span="8">职务编码:<input type="text" v-model="name"></van-col>
      <!-- <van-col span="7">手机号:<input type="text"></van-col> -->
      <van-col span="8"><van-button type="primary" size="small" @click="querydata">查询</van-button><van-button size="small">重置</van-button></van-col>
    </van-row>
    <van-row style="padding-top: 1rem;padding-bottom: 1% ">
      <van-col span="3"><van-button type="primary" size="small" >新增</van-button></van-col>
      <van-col span="3"><van-button  size="small" >删除</van-button></van-col>
      <van-col span="3"><van-button size="small">导入</van-button></van-col>
      <van-col span="3"><van-button size="small">导出</van-button></van-col>
      <van-col span="3"><van-button  size="small">冻结</van-button></van-col>
      <van-col span="3"><van-button  size="small">解冻</van-button></van-col>
      <van-col span="3"><van-button size="small">回收站</van-button></van-col>
    </van-row>
    <van-row>
      <!-- <van-col span="4"><el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick"></el-tree></van-col> -->
      <van-col span="20">
        <div>
          <table>
            <tr><th>序号</th>
            <th>职务名称</th>
            <th>职务编码</th>
            <th>职务排序</th>
            <th>操作</th></tr>
            <tr v-for="data in datalist" :key="data.id">
              <td>{{data.id}}</td>
              <td>{{data.name}}</td>
              <td>{{data.uid}}</td>
              <td>{{data.zid}}</td>
              <td><button>用户</button><button>编辑</button><button>删除</button></td>
            </tr>
          </table>
        </div>
      </van-col>
    </van-row>
  </div>
            </van-row>
            </van-col>
        </van-row>
        
  </div>
</template>

<script>
import axios from 'axios'
import myheader from '../comm/myheader.vue'
import myleft from '../comm/myleft.vue'
// import add from '../add.vue'
export default {
  data() {
    return {
      data: [],
      datalist:[],
      show:false,      
      defaultProps: {
        children: 'children',
        label: 'label',
      },
      
    }
  },
  methods:{
      handleNodeClick(data) {
      console.log(data)
    },
    getdept(){
      axios({url:'http://127.0.0.1:5000/deptlist',method:'get'}).then(res=>{
        
        this.data = res.data.list
      })
    },
    getuser(){
      axios({url:'http://127.0.0.1:5000/zhiwulist',method:'get'}).then(res=>{
        this.datalist=res.data.list
      })
    }
  },
  mounted(){
    this.getdept(),
    this.getuser()
  },
  components:{
        'myheader':myheader,
        'myleft':myleft,
        // 'add':add,
        // 'mygroup':mygroup
    },

}
</script>

<style>

</style>